<template>
  <!-- <div class="box">
    <div class="bj">
      <h1>修改信息</h1>
      房屋联系人：<input type="text"><br>
      性别：<input type="text"><br>
      电话：<input type="text"><br>
      房屋编号:<input type="text"><br>
      房屋地址:<input type="text"><br>
      房屋类型:<input type="text"><br>
      <button @click="fn">确定</button>
      <button>取消</button>
    </div>
  </div> -->
  <div class="bodys">
    <!-- 标题 -->
    <div class="box-gl">
      <span class="sp1">房屋管理</span>/<span class="sp2">合租管理</span>
    </div>
    <!-- 下边内容 -->
    <div class="box-center">
      <!-- 城市选择 -->

      <div class="top">
        <div class="pq">片区名称</div>
        <!-- 城市选择 -->

        <el-select v-model="value1" placeholder="上城区">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <!-- 房租类型 -->
        <div class="fz">房租类型</div>

        <!--  几室几厅-->
        <el-select v-model="value2" placeholder="一室">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <div class="zk">房屋状况</div>

        <!-- 已租未组 -->

        <el-select v-model="value3" placeholder="已租">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <!-- 筛选按钮 -->
        <button class="shaiXuan" @click="sx">筛选</button>

        <!-- 搜索框 -->
        <div class="top-s">
          <el-input
            v-model="input"
            class="w-50 m-2"
            size="small"
            placeholder="请输入需要查询的房屋编号"
            :suffix-icon="Search"
            style="width: 200px; height: 24px"
          />
          <div class="fdj" @click="search">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
          </div>

          <span style="vertical-align: middle"></span>
          <el-button
            type="primary"
            @click="dialogVisible = true"
            style="
              width: 85px;
              height: 25px;
              background: #4ca4fe;
              border-radius: 8px;
              margin-left:20px;">添加</el-button>
               <!-- 添加 -->
               <div class="add">
          <el-dialog
            v-model="dialogVisible"
            title="新增合租信息"
            width="40%"
            :before-close="handleClose"
          >
          <p>
              <span>姓名:</span>
              <el-input v-model="nameinput" placeholder=" 请输入文字" />
            </p>
          <p>
              <span> 性别:</span>
              <el-select v-model="sex" class="m-2" placeholder="请选择">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </p>
            <p>
              <span> 联系电话:</span>

              <el-input v-model="phoneinput" placeholder=" 请输入数字" />
            </p>
            <p>
              <span>房屋编号:</span>
              <el-input v-model="numinput" placeholder=" 请输入数字" />
            </p>
            <p>
              <span>房屋地址:</span>
              <el-input v-model="dzinput" placeholder=" 请输入数字" />
            </p>

            <p>
              <span>房屋类型:</span>
              <el-select v-model="typevalue" class="m-2" placeholder="请选择">
                <el-option label="一室" value="一室" />
                <el-option label="二室" value="二室" />
              </el-select>
            </p>
            <p>
              <span>房屋状况:</span>
              <el-select v-model="zfvalue" class="m-2" placeholder="请选择">
                <el-option label="已租" value="已租" />
                <el-option label="未租" value="未租" />
              </el-select>
            </p>
           
            <p class="msg" v-show="show">必须输入订单类型,姓名和收入</p>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save"> 保存 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>

        </div>
      </div>









      <!-- 下边table -->
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px; text-align: center"
        :stripe="true"
      >
        <el-table-column prop="name" label="房屋联系人" />
        <el-table-column prop="sex" label="性别" width="80" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="bh" label="房屋编号" />
        <el-table-column prop="dz" label="房屋地址" width="80" />
        <el-table-column prop="lx" label="房屋类型" />
        <el-table-column prop="zt" label="房屋状况" >
 
          <template #default="scope">
           <span :class="{red:scope.row.zt==='已租'}"></span>
           <span :class="{green:scope.row.zt==='未租'}"></span>
           <span>{{scope.row.zt}}</span>
          </template>
        </el-table-column>
          
        <el-table-column label="操作">
          <template #default="scope">
            <el-button>查看</el-button>
            <el-popconfirm
              title="是否删除此条数据"
              @confirm="confirm(scope.row.id)"
              @cancel="cancel"
            >
              <template #reference>
                <el-button>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->

      <el-pagination
        :page-size="20"
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import "@/mock/chare";
import { ref, onMounted } from "vue";
import axios from "axios";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
//城市选择
const value1 = ref("");
const typevalue = ref("");
const nameinput = ref();
const numinput = ref();
const sex = ref();
const phoneinput = ref();
const dzinput=ref();
const dialogVisible = ref(false);
let show = ref(false);
const zfvalue=ref();

const save = () => {
  axios
    .post("/api/share/add",{datas: {
      id:+new Date(),
      lx: typevalue.value,
      name: nameinput.value,
      sex: sex.value,
      phone: phoneinput.value,
      bh: numinput.value,
      dz:dzinput.value,
      zt:zfvalue.value
    }})
    .then((res) => {
      if (res.data.status === 0) {
        getData();
      } else {
        show.value = true;
        dialogVisible.value = true;
      }
    });

  dialogVisible.value = false;
};




const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确认关闭吗?您的内容还未保存")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const options1 = [
  {
    value: "上城区",
    label: "上城区",
  },
  {
    value: "拱墅区",
    label: "拱墅区",
  },
  {
    value: "下沙区",
    label: "下沙区",
  },
  {
    value: "西湖区",
    label: "西湖区",
  },
  {
    value: "临平区",
    label: "临平区",
  },
];

// 几室几厅
const value2 = ref("");
const options2 = [
  {
    value: "一室",
    label: "一室",
  },
  {
    value: "二室",
    label: "二室",
  },
  {
    value: "三室",
    label: "三室",
  },
  {
    value: "四室",
    label: "四室",
  },
];

//已组未组
const value3 = ref("");
const options3 = [
  {
    value: "未租",
    label: "未租",
  },
  {
    value: "已租",
    label: "已租",
  },
];

// 定义数据类型
interface ItemType {
  name: string;
  sex: string;
  phone: number;
  bh: number;
  dz: string;
  lx: string;
  zt: string;
}

const tableData = ref<ItemType[]>([]);
const total = ref<number>(0);

const input = ref<any>();
onMounted(() => {
  getData();
});
const getData = (page?: number) => {
  axios
    .post("/api/chare/list", {
      city: value1.value,
      lx: value2.value,
      zt: value3.value,
      pageSize: 17,
      currentPage: page || 1,
      search: input.value,
    })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
      // console.log(res.data.count);
    });
};
const pageChange = (page: number) => {
  getData(page);
};
const sx = () => {
  getData();
  console.log(123);
};
const search = () => {
  getData(1);
  console.log(123);
};
const confirm = (id: number) => {
  console.log("确定删除", id);
  axios
    .post("/api/share/del", {
      id: id,
    })
    .then((res) => {
      getData();
    });
};
const cancel = () => {
  console.log("取消");
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;

  .bj {
    width: 400px;
    height: 400px;
    background-color: white;
    z-index: 100;
    position: fixed;
    opacity: 1;
    left: 50%;
    top: 50%;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
  }
}
.bodys {
  width: 100%;
  height: 100%;
  background: #f6f6f6;

  .box-gl {
    padding: 17px 0 0 15px;
    .sp1 {
      width: 47px;
      height: 13px;
      font-size: 12px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #555555;
      line-height: 21px;
      font-weight: 900;
      .sp2 {
        width: 47px;
        height: 13px;
        font-size: 12px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #888888;
        line-height: 21px;
        font-weight: 900;
      }
    }
  }
   .red,.green{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: red;
    margin-right: 5px;
    // position: absolute;
    // top: 19px ;
    // left: 89px;
    

   }
   .green{
      background-color: green;
    }
  .box-center {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin: 16px 17px 16px 16px;
    .add {
      p {
        width: 100%;
        height: 30px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        font-size: 16px;
      }
      span {
        display: inline-block;
        width: 120px;
      }
      .el-input {
        width: 200px;
      }
      .dialog-footer button:first-child {
        margin-right: 300px;
        margin-top: -75px;
      }
      .dialog-footer button:last-child {
        margin-right: -1px;
        margin-top: -103px;
        border: 0;
        background-color: #ff8f4d;
      }
      .msg {
        text-align: center;
        color: red;
        font-size: 20px;
      }
    }
    .top {
      .top-s {
        position: relative;
        display: inline-block;
      }
    }
    .pq {
      margin: 25px 0px 0 17px;
      width: 48px;
      height: 13px;
      font-size: 12px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #555555;
      line-height: 21px;
      display: inline-block;
      // background-color: red;
    }
    :deep(.el-input__wrapper) {
      color: #888888;
      background-color: #f6f6f6;
      width: 151px;
      height: 22px;
      margin: 0px 0 0 17px;
      border-radius: 7px;
    }
   
    .fz {
      display: inline-block;
      width: 48px;
      height: 13px;
      font-size: 12px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #555555;
      line-height: 21px;
      margin-left: 32px;
    }
    .fdj {
      display: inline-block;
      width: 40px;
      height: 40px;
      text-align: center;
      position: absolute;
      right: 98px;
      top: -10px;
      line-height: 40px;
    }
    .zk {
      display: inline-block;
      width: 48px;
      height: 12px;
      font-size: 12px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #555555;
      line-height: 21px;
      margin-left: 32px;
    }
    .shaiXuan {
      width: 85px;
      height: 25px;
      background-color: #4ca4fe;
      border: none;
      border-radius: 8px;
      margin-left: 40px;
      color: white;
    }

    .sousuo {
      width: 311px;
      height: 24px;
      background: #f6f6f6;
      border-radius: 8px;
      border: none;
      color: #888888;
      margin-left: 280px;
    }

    .tj {
      width: 85px;
      height: 25px;
      background: #4ca4fe;
      border-radius: 8px;
      border: none;
      margin-left: 26px;
      color: white;
    }
    :deep(th.el-table__cell) {
      background-color: #4ca4fe;
      color: #fff;
    }
    :deep(.el-table .cell) {
      text-align: center;
    }
    .el-pagination {
      margin-top: 20px;
      justify-content: flex-end;
    }
  }
}
</style>
